<form (ngSubmit)="apply()" [formGroup]="settingsForm">

  <div class="settings-grid">
    <label for="maxRows">Max rows</label>
    <input formControlName="maxRows" id="maxRows" type="number"/>
  </div>

  <div class="settings-grid">
    <label>Colors</label>
    <div formGroupName="colors" class="settings-cell">
      <label for="systemColor">System</label>
      <input formControlName="system" id="systemColor" type="color">

      <label for="traceColor">Trace</label>
      <input formControlName="trace" id="traceColor" type="color">

      <label for="debugColor">Debug</label>
      <input formControlName="debug" id="debugColor" type="color">

      <label for="infoColor">Info</label>
      <input formControlName="info" id="infoColor" type="color">

      <label for="warnColor">Warn</label>
      <input formControlName="warn" id="warnColor" type="color">

      <label for="errorColor">Error</label>
      <input formControlName="error" id="errorColor" type="color">

      <label for="fatalColor">Fatal</label>
      <input formControlName="fatal" id="fatalColor" type="color">
    </div>
  </div>

  <hr/>

  <div class="settings-grid" formArrayName="sources">
    <ng-container *ngFor="let sourceItem of sources; let i = index" [formGroup]="sourceItem">

      <label for="source">Source</label>
      <input formControlName="source" id="source" type="text"/>

      <label>Input Format</label>
      <div>
        <input formControlName="inputFormat" id="json" name="inputFormat" type="radio" value="json"/>
        <label for="json">Json</label>
        <input formControlName="inputFormat" id="csv" name="inputFormat" type="radio" value="csv"/>
        <label for="csv">CSV</label>
      </div>

      <label [hidden]="sourceItem.get('inputFormat')?.value !== 'csv'" for="csvFormat">CSV Format</label>
      <input [hidden]="sourceItem.get('inputFormat')?.value !== 'csv'" formControlName="csvFormat" id="csvFormat" type="text"/>
    </ng-container>
  </div>

  <div class="container">
    <button type="submit">Apply</button>
  </div>
</form>
